<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智科学院 - 心理咨询</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#F97316',
                        accent: '#8B5CF6',
                        neutral: '#F3F4F6',
                        'neutral-dark': '#4B5563',
                        'primary-light': '#DBEAFE',
                        'secondary-light': '#FFEDD5',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'soft': '0 4px 20px rgba(0, 0, 0, 0.05)',
                        'hover': '0 8px 30px rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .message-appear {
                animation: fadeIn 0.3s ease-in-out;
            }
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            .typing-indicator {
                display: inline-flex;
                align-items: center;
            }
            .typing-indicator span {
                height: 8px;
                width: 8px;
                margin: 0 1px;
                background-color: #3B82F6;
                border-radius: 50%;
                display: inline-block;
                animation: typing-bounce 1.4s infinite ease-in-out both;
            }
            .typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
            .typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
            @keyframes typing-bounce {
                0%, 80%, 100% { transform: scale(0); }
                40% { transform: scale(1); }
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-gray-800 min-h-screen flex flex-col">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md sticky top-0 z-50 transition-all duration-300" id="navbar">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white">
                    <i class="fa fa-heart-o text-xl"></i>
                </div>
                <h1 class="text-xl font-bold text-primary">智科学院</h1>
            </div>
            <div class="hidden md:flex items-center space-x-6">
                <a href="#" class="text-neutral-dark hover:text-primary transition-colors duration-200">首页</a>
                <a href="#" class="text-primary font-medium">心理咨询</a>
                <a href="#" class="text-neutral-dark hover:text-primary transition-colors duration-200">服务介绍</a>
                <a href="#" class="text-neutral-dark hover:text-primary transition-colors duration-200">关于我们</a>
            </div>
            <button class="md:hidden text-neutral-dark hover:text-primary">
                <i class="fa fa-bars text-xl"></i>
            </button>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="flex-grow container mx-auto px-4 py-6 md:py-10">
        <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-soft overflow-hidden flex flex-col h-[80vh] md:h-[85vh]">
            <!-- 聊天头部 -->
            <div class="p-4 md:p-6 bg-primary-light border-b border-gray-100 flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div class="w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center">
                        <i class="fa fa-user-circle-o text-2xl text-primary"></i>
                    </div>
                    <div>
                        <h2 class="font-semibold text-lg">心理咨询师小智</h2>
                        <p class="text-sm text-neutral-dark flex items-center">
                            <span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-1"></span>
                            <span id="status-text">在线 · 专业心理咨询师</span>
                        </p>
                    </div>
                </div>
                <div class="flex space-x-3">
                    <button class="p-2 text-neutral-dark hover:text-primary transition-colors duration-200" title="帮助">
                        <i class="fa fa-question-circle"></i>
                    </button>
                    <button class="p-2 text-neutral-dark hover:text-primary transition-colors duration-200" title="设置">
                        <i class="fa fa-cog"></i>
                    </button>
                </div>
            </div>

            <!-- 聊天区域 -->
            <div class="flex-grow overflow-y-auto p-4 md:p-6 scrollbar-hide" id="chat-container">
                <!-- 欢迎消息 -->
                <div class="flex items-start mb-6 message-appear">
                    <div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
                        <i class="fa fa-user-circle-o text-xl text-primary"></i>
                    </div>
                    <div class="ml-3 max-w-[85%]">
                        <div class="bg-primary-light rounded-t-lg rounded-br-lg p-4 shadow-sm">
                            <p class="font-medium text-primary">我是智科学院，心理咨询师小智！</p>
                            <p class="mt-1">请问有什么可以帮您？我会尽力为您提供专业、温暖的心理支持。</p>
                        </div>
                        <p class="text-xs text-neutral-dark mt-1">刚刚</p>
                    </div>
                </div>

                <!-- 系统提示 -->
                <div class="text-center my-4">
                    <span class="text-xs text-neutral-dark bg-gray-100 px-3 py-1 rounded-full">
                        专业心理咨询服务 · 全程保密
                    </span>
                </div>
            </div>

            <!-- 输入区域 -->
            <div class="p-4 md:p-6 border-t border-gray-100 bg-gray-50">
                <div class="flex flex-col space-y-3">
                    <div class="relative">
                        <textarea id="user-input" rows="3" placeholder="请输入您的问题..." 
                            class="w-full px-4 py-3 rounded-lg border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 resize-none pr-12 outline-none shadow-sm"></textarea>
                        <button id="send-btn" class="absolute right-3 bottom-3 p-2 text-primary hover:text-primary/80 transition-colors duration-200">
                            <i class="fa fa-paper-plane-o text-lg"></i>
                        </button>
                    </div>
                    <div class="flex justify-between items-center">
                        <div class="flex space-x-3">
                            <button class="p-2 text-neutral-dark hover:text-primary transition-colors duration-200" title="上传图片">
                                <i class="fa fa-picture-o"></i>
                            </button>
                            <button class="p-2 text-neutral-dark hover:text-primary transition-colors duration-200" title="上传文件">
                                <i class="fa fa-file-o"></i>
                            </button>
                            <button class="p-2 text-neutral-dark hover:text-primary transition-colors duration-200" title="语音输入">
                                <i class="fa fa-microphone"></i>
                            </button>
                        </div>
                        <button id="clear-btn" class="text-sm text-neutral-dark hover:text-red-500 transition-colors duration-200">
                            清空对话
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-100 py-6">
        <div class="container mx-auto px-4 text-center text-neutral-dark text-sm">
            <p>© 2025 智科学院 - 专业心理咨询服务平台</p>
            <p class="mt-1">本平台提供的内容仅供参考，不能替代专业的心理咨询服务</p>
        </div>
    </footer>

    <!-- 加载中模态框 -->
    <div id="loading-modal" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50 hidden">
        <div class="bg-white rounded-lg p-6 max-w-md w-full shadow-lg flex flex-col items-center">
            <div class="typing-indicator mb-4">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <p class="text-center" id="loading-text">小智正在思考中...</p>
        </div>
    </div>

    <script>
        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            if (window.scrollY > 10) {
                navbar.classList.add('py-2', 'shadow-md');
                navbar.classList.remove('py-3', 'shadow-sm');
            } else {
                navbar.classList.add('py-3', 'shadow-sm');
                navbar.classList.remove('py-2', 'shadow-md');
            }
        });

        // 聊天功能
        document.addEventListener('DOMContentLoaded', function() {
            const chatContainer = document.getElementById('chat-container');
            const userInput = document.getElementById('user-input');
            const sendBtn = document.getElementById('send-btn');
            const clearBtn = document.getElementById('clear-btn');
            const loadingModal = document.getElementById('loading-modal');
            const loadingText = document.getElementById('loading-text');
            const statusText = document.getElementById('status-text');
            
            // 对话历史
            let messages = [
                {"role": "system", "content": "【指令】\n1. 你已声明身份为「智科学院心理咨询师小智」\n2. 每次回复必须以「我是智科学院，心理咨询师小智！」开头\n3. 保持专业、简洁、温暖的语气"},
                {"role": "assistant", "content": "我是智科学院，心理咨询师小智！请问有什么可以帮您？"}
            ];
            
            // 检查模型状态
            function checkModelStatus() {
                fetch('/get_response', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({messages: []})
                })
                .then(response => response.json())
                .then(data => {
                    const response = data.response;
                    if (response.includes("加载中")) {
                        statusText.textContent = "模型加载中 · 请稍候";
                        statusText.classList.add('text-orange-500');
                        statusText.classList.remove('text-neutral-dark');
                        setTimeout(checkModelStatus, 2000); // 2秒后再检查
                    } else {
                        statusText.textContent = "在线 · 专业心理咨询师";
                        statusText.classList.remove('text-orange-500');
                        statusText.classList.add('text-neutral-dark');
                    }
                })
                .catch(error => {
                    console.error('检查模型状态时出错:', error);
                    statusText.textContent = "连接错误 · 请刷新页面";
                    statusText.classList.add('text-red-500');
                    statusText.classList.remove('text-neutral-dark');
                });
            }
            
            // 初始化时检查模型状态
            checkModelStatus();
            
            // 发送消息
            function sendMessage() {
                const message = userInput.value.trim();
                if (!message) return;
                
                // 添加用户消息到聊天区域和对话历史
                appendMessage('user', message);
                messages.push({"role": "user", "content": message});
                
                // 清空输入框
                userInput.value = '';
                
                // 显示加载中
                loadingText.textContent = "小智正在思考中...";
                loadingModal.classList.remove('hidden');
                
                // 发送请求到后端
                fetch('/get_response', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({messages: messages})
                })
                .then(response => response.json())
                .then(data => {
                    // 隐藏加载中
                    loadingModal.classList.add('hidden');
                    
                    // 添加回复到聊天区域和对话历史
                    const response = data.response;
                    appendMessage('assistant', response);
                    messages.push({"role": "assistant", "content": response});
                })
                .catch(error => {
                    // 隐藏加载中
                    loadingModal.classList.add('hidden');
                    
                    // 显示错误消息
                    appendMessage('assistant', "抱歉，连接服务器时出错，请重试。");
                    console.error('发送消息时出错:', error);
                });
            }
            
            // 添加消息到聊天区域
            function appendMessage(role, content) {
                const messageDiv = document.createElement('div');
                messageDiv.className = `flex items-start mb-6 message-appear ${role === 'user' ? 'justify-end' : ''}`;
                
                let avatar, bgColor, iconColor;
                if (role === 'user') {
                    avatar = `<div class="w-10 h-10 rounded-full bg-secondary/20 flex items-center justify-center flex-shrink-0">
                                <i class="fa fa-user text-xl text-secondary"></i>
                            </div>`;
                    bgColor = 'bg-secondary-light';
                    iconColor = 'text-secondary';
                } else {
                    avatar = `<div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center flex-shrink-0">
                                <i class="fa fa-user-circle-o text-xl text-primary"></i>
                            </div>`;
                    bgColor = 'bg-primary-light';
                    iconColor = 'text-primary';
                }
                
                const messageContent = role === 'user' 
                    ? content 
                    : `<p class="font-medium ${iconColor}">我是智科学院，心理咨询师小智！</p>
                       <p class="mt-1">${content}</p>`;
                
                const roundedClass = role === 'user' 
                    ? 'rounded-t-lg rounded-bl-lg' 
                    : 'rounded-t-lg rounded-br-lg';
                
                messageDiv.innerHTML = `
                    ${role === 'user' ? '' : avatar}
                    <div class="${role === 'user' ? 'mr-3' : 'ml-3'} max-w-[85%]">
                        <div class="${bgColor} ${roundedClass} p-4 shadow-sm">
                            ${messageContent}
                        </div>
                        <p class="text-xs text-neutral-dark mt-1">刚刚</p>
                    </div>
                    ${role === 'user' ? avatar : ''}
                `;
                
                chatContainer.appendChild(messageDiv);
                chatContainer.scrollTop = chatContainer.scrollHeight;
            }
            
            // 发送按钮点击事件
            sendBtn.addEventListener('click', sendMessage);
            
            // 输入框回车事件
            userInput.addEventListener('keydown', function(e) {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendMessage();
                }
            });
            
            // 清空对话
            clearBtn.addEventListener('click', function() {
                if (confirm('确定要清空对话吗？')) {
                    // 保留欢迎消息
                    const welcomeMessage = chatContainer.querySelector('.message-appear');
                    Array.from(chatContainer.children).forEach(child => {
                        if (child !== welcomeMessage) {
                            chatContainer.removeChild(child);
                        }
                    });
                    
                    // 重置对话历史
                    messages = [
                        {"role": "system", "content": "【指令】\n1. 你已声明身份为「智科学院心理咨询师小智」\n2. 每次回复必须以「我是智科学院，心理咨询师小智！」开头\n3. 保持专业、简洁、温暖的语气"},
                        {"role": "assistant", "content": "我是智科学院，心理咨询师小智！请问有什么可以帮您？"}
                    ];
                }
            });
            
            // 自动调整输入框高度
            userInput.addEventListener('input', function() {
                this.style.height = 'auto';
                this.style.height = (this.scrollHeight > 100 ? 100 : this.scrollHeight) + 'px';
            });
        });
    </script>
</body>
</html>